<template>
    <div>
      <div class="me_header">
        <!--<div class="me_left">-->
        <img @click="bac()" :src="'./static/lyl/back.png'" alt="">
          <!--<img src="../../../assets/img/name.png" alt="">-->
          <!--<span>昵称</span>-->
        <!--</div>-->
        <span>全部动态</span>
        <img :src="'./static/lyl/san.png'" alt="">
      </div>

      <ul class="ja_ul">
        <li v-for="(item,index) in acData" :key="index">
          <div class="left">
            <img :src="item.avatar" alt="">
          </div>
          <div class="right">
            <p>{{item.user_login}}</p>
            <div @click="Adetail(item)" class="zheng">
              <p>{{item.content}}</p>
              <div class="img" v-show="item.image.length==0?false:true">
                <img :class="item.image.length>1?'actimg':''" v-for="(item2,index2) in item.image" :src="item2" alt="数据加载失败" :key="index2">
              </div>
            </div>
            <div class="r_foot">
              <span>{{item.create_time | simplyToRelativeTime}}</span>
              <div class="r_right">
                <img @click="like3(item)" :src="item.status==1?'./static/lyl/like.png':'./static/lyl/like2.png'" alt="">
                <img @click="ping2(item)" src="../../../assets/img/ping.png" alt="">
              </div>
            </div>
          </div>
        </li>
      </ul>

      <transition name="van-slide-right">
        <div v-show="visible" class="tran_right">{{Fade}}</div>
      </transition>
    </div>
</template>

<script>
  import * as list from "../../../api/list.js";
  import * as search from "../../../api/search.js"
    export default {
      name: "JiActive",
      data(){
        return {
          Fade:'',
          visible:false,
          acData:[]
        }
      },
      mounted(){
        let par = {user_id:this.$store.state.user_id,uid:this.$route.query.id};
        search.userDynamic(par).then(res=>{
          console.log('动态',res)
          this.acData = res.data
        })
      },
      methods:{
        bac(){
          history.go(-1)
        },
        Adetail(item){
          this.$router.push({
            path:'/acticont',
            query:{
              id:item.id,
              uid:this.$route.query.id
            }
          })
        },
        ping2(item){
          this.$router.push({
            path:'/acticont',
            query:{
              id:item.id,
              uid:this.$route.query.id,
              bol:true
            }
          })
        },
        like3(itl){
          if (itl.status==1){
            itl.status=0;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            list.activeDynamicLike(parms).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          } else{
            itl.status=1;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            list.activeDynamicLike(parms).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            })
          }
        }
      },
      filters:{
        simplyToRelativeTime(timestamp) {
          let currentUnixTime = Math.round((new Date()).getTime() / 1000);       // 当前时间的秒数
          let deltaSecond = currentUnixTime - parseInt(timestamp, 10);            // 当前时间与要转换的时间差（ s ）
          let result;

          if (deltaSecond < 60) {
            result = deltaSecond + '秒前';
          } else if (deltaSecond < 3600) {
            result = Math.floor(deltaSecond / 60) + '分钟前';
          } else if (deltaSecond < 86400) {
            result = Math.floor(deltaSecond / 3600) + '小时前';
          } else {
            result = Math.floor(deltaSecond / 86400) + '天前';
          }
          return result;
        }
      }
    }
</script>

<style scoped>
  .me_header{
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #dcdcdc;
  }
  /*.me_header .me_left{*/
    /*display: flex;*/
    /*align-items: center;*/
  /*}*/
  /*.me_header .me_left span{*/
    /*font-size: 18px;*/
    /*color: #818181;*/
  /*}*/
  .me_header img:nth-child(1){
    width: 25px;
    height: 40px;
  }
  /*.me_header .me_left img:nth-child(2){*/
    /*width: 60px;*/
    /*height: 60px;*/
    /*margin: 0 20px;*/
  /*}*/
  .me_header>span{
    font-size: 28px;
    align-self: center;
  }
  .me_header>img:nth-child(3){
    align-self: center;
    width: 60px;
  }

  .ja_ul li{
    padding: 20px 40px;
    display: flex;
    border-bottom: 2px solid #dcdcdc;
  }
  .ja_ul li .left img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }
  .ja_ul li .right{
    flex-grow: 1;
    padding-left: 15px;
  }
  .ja_ul li .right>p{
    font-size: 36px;
    color: #884ca4;
    padding-bottom: 20px;
  }
  .ja_ul li .right .zheng p{
    font-size: 20px;
    padding-bottom: 20px;
  }
  .ja_ul li .right .img img{
    width: 350px;
    height: 500px;
  }
  .ja_ul li .right .img .actimg{
    width: 180px;
    height: 180px;
    margin:0 10px 10px 0;
  }
  .ja_ul li .right .img img:nth-child(3n+3){
    margin-right: 0;
  }
  .ja_ul li .right .r_foot{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .ja_ul li .right .r_foot span{
    font-size: 18px;
    color: #818181;
  }
  .ja_ul li .right .r_foot .r_right img:nth-child(1){
    width: 35px;
    height: 35px;
    margin-right: 20px;
  }
  .ja_ul li .right .r_foot .r_right img:nth-child(2){
    width: 40px;
    height: 35px;
  }

  .tran_right{
    width: 220px;
    height: 60px;
    border-radius: 10px;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    top: 50%;
    left: 50%;
    position: fixed;
    background: rgba(0,0,0,0.6);
    color: #fff;
  }
</style>
